<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Cluster</title>
    <!--<link rel="stylesheet" href="http://172.19.66.58/arcgis_js_api/library/3.14/dojo/dijit/themes/tundra/tundra.css">-->
    <link rel="stylesheet" href="http://172.19.66.58/arcgis_js_api/library/3.14/esri/css/esri.css" />
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad:true,
            packages:[{
                name:"custom",
                location:"custom"
            }]
        };
    </script>
    <script src="http://172.19.66.58/arcgis_js_api/library/3.14/init.js"></script>
    <script>
        var map;
        require([
            "dojo/parser",
            "dojo/ready",
            "dojo/_base/array",
            "esri/Color",
            "dojo/dom-style",
            "dojo/query",
            "esri/map",
            "esri/layers/WebTiledLayer",
            "esri/layers/FeatureLayer",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/InfoTemplate",
            "esri/request",
            "esri/graphic",
            "esri/geometry/Extent",
            "esri/tasks/query",
            "esri/tasks/QueryTask",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/ClassBreaksRenderer",
            "esri/layers/GraphicsLayer",
            "esri/dijit/PopupTemplate",
            "esri/geometry/Point",
            "esri/config",
            "extras/ClusterLayer",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (
            parser, ready, arrayUtils, Color, domStyle, query,
            Map, WebTiledLayer,FeatureLayer,SimpleLineSymbol,SimpleRenderer,InfoTemplate,esriRequest, Graphic, Extent,Query, QueryTask,
            SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
            GraphicsLayer, PopupTemplate, Point,esriConfig,
            ClusterLayer
        ) {
            //esriConfig.defaults.io.proxyUrl = "/proxy";
            //parser.parse();

            var clusterLayer;

            map = new Map("map", {
                center: [119.93,37.27],
                zoom: 12,
                logo:false
            });

            var layer = new WebTiledLayer('http://${subDomain}.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}',{
                subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7']
            })
            map.addLayer(layer);
            //中文注记
            var annolayer = new WebTiledLayer("http://${subDomain}.tianditu.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}",{
                subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7']
            });
            map.addLayer(annolayer);
            var featureLayer = new FeatureLayer("http://172.19.66.55:6080/arcgis/rest/services/LINE/FeatureServer/1");
            map.addLayer(featureLayer);

            //使用Query 进行查询要素
            var queryTask1 = new QueryTask("http://172.19.66.55:6080/arcgis/rest/services/LINE/FeatureServer/0");
          //  var queryTask2 = new QueryTask("http://172.19.66.55:6080/arcgis/rest/services/LINE/FeatureServer/1");
            var query = new Query();
            query.returnGeometry = true;
            query.outFields = ["*"];
            query.outSpatialReference = { wkid: 3857 };
            query.where = "ObjectID<1000";
            queryTask1.execute(query,addClusters);
        //    queryTask2.execute(query,addClusters);



            function addClusters(resp) {

                console.log(resp)
                var photoInfo = {};
                //将查询的要素按照ClusterLayer要求的数组对象进行重新组合
                photoInfo.data = arrayUtils.map(resp.features, function (p) {
                    var attributes = {
                        "NAME": p.attributes["NAME"],
                        "MVALUE": p.attributes["MVALUE"],
                        "LINEID": p.attributes["LINEID"],
                        "OBJECTID": p.attributes["OBJECTID"]
                    };
                    return {
                        "x": p.geometry.x,
                        "y": p.geometry.y,
                        "attributes": attributes
                    };
                });
                // cluster layer that uses OpenLayers style clustering
                clusterLayer = new ClusterLayer({
                    "data": photoInfo.data,
                    "distance": 100,
                    "id": "clusters",
                    "labelColor": "#fff",
                    "labelOffset": 10,
                    "resolution": map.extent.getWidth() / map.width,
                    "singleColor": "#888"

                });
                var defaultSym = new SimpleMarkerSymbol().setSize(4);
                var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");

                var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
                var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
                var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
                var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
                renderer.addBreak(0, 10, blue);
                renderer.addBreak(10, 20, green);
                renderer.addBreak(20, 40, red);

                clusterLayer.setRenderer(renderer);
                map.addLayer(clusterLayer);

                // close the info window when the map is clicked
                map.on("click", cleanUp);
                // close the info window when esc is pressed
                map.on("key-down", function (e) {
                    if (e.keyCode === 27) {
                        cleanUp();
                    }
                });
            }

            function cleanUp() {
                map.infoWindow.hide();
                clusterLayer.clearSingles();
            }

            function error(err) {
                console.log("something failed: ", err);
            }
        });




    </script>
</head>

<body>
<div id="map" style="width: 900px; height: 800px;">

</div>
</body>
</html>
